/*
 * @Author: yxfan
 * @Date: 2023-12-19 16:16:17
 * @LastEditTime: 2023-12-19 17:08:27
 * @FilePath: /umi-demo/src/pages/test/useLayoutEffect/index.tsx
 * @Description:
 */
import React from 'react';
import { useState, useEffect, useLayoutEffect, useRef } from 'react';
import './index.less';

function Home() {
    const pRef = useRef();

    useLayoutEffect(() => {
        console.log('Home - effect');
        const n = document.getElementById('t');
        console.log('n1', n, n?.offsetWidth);

        if (pRef.current) {
            pRef.current.style.left = '500px';
        }
    }, []);
    return (
        <div>
            <p id="t" ref={pRef}></p>
        </div>
    );
}

export default function App() {
    const [show, setShow] = useState(false);
    return (
        <div className="useEffect-useLayoutEffect">
            {show && <Home />}
            <button
                onClick={() => {
                    setShow(!show);
                }}
            >
                useLayoutEffect切换
            </button>
            <br />
            <a href="https://juejin.cn/post/7044161793471545381#heading-0">
                参考文章
            </a>
        </div>
    );
}
